import React, { useState } from 'react'
import HomeHead from '../components/home_head'
import './home.less'
import { Swiper } from 'antd-mobile'
import { Link } from "react-router-dom"

export default function Home() {
  let time = new Date()
  let [day, setDay] = useState(time)
  return (
    // 用less写样式时，保证最外层的div类名不冲突
    <div className="home_box">
      首页
      <HomeHead day={day}></HomeHead>
      {/* 轮播图 */}
      <div className="swiper-box" >
        <Swiper autoplay={true} loop={true}>
          <Swiper.Item >
            {/* 实现路由跳转： 使用link标签包裹点击后可跳转的元素 */}
            <Link to='/detail/xxx'>
              <img src="https://uploadfile.bizhizu.cn/2017/0701/20170701031428774.jpg" alt="" />
              <div className="des">
                <h3 className='title'>轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图</h3>
                <p>nzy</p>
              </div>
            </Link>
          </Swiper.Item>
          <Swiper.Item >
            {/* 实现路由跳转： 使用link标签包裹点击后可跳转的元素 */}
            <Link to='/detail/xxx'>
              <img src="https://uploadfile.bizhizu.cn/2017/0701/20170701031428774.jpg" alt="" />
              <div className="des">
                <h3 className='title'>轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图</h3>
                <p>nzy</p>
              </div>
            </Link>
          </Swiper.Item>
          <Swiper.Item >
            {/* 实现路由跳转： 使用link标签包裹点击后可跳转的元素 */}
            <Link to='/detail/xxx'>
              <img src="https://uploadfile.bizhizu.cn/2017/0701/20170701031428774.jpg" alt="" />
              <div className="des">
                <h3 className='title'>轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图轮播图</h3>
                <p>nzy</p>
              </div>
            </Link>
          </Swiper.Item>

        </Swiper>
      </div>
    </div>
  )
}

/* 
    组件抽离：
      + 公用性的 ： 
      + 页面内容较多的： 全写在一起不方便维护，拆开在合并

    普通业务组件： 一个个的普通的SPA页面
    通用业务组件： SPA页面中可能同用的组件
    通用功能组件： 封装组件库，大牛
      前三年： 对UI组件库中的组件进行：
        + 二次封装： 部分样式的修改
        + 或者多个组件的整合，
        + 一般需要自己封装的是： 文件上传类，或影音类的比较匮乏
*/
